<template>
	<el-menu
		class="lm_menu" 
		background-color="#545c64"
		text-color="#fff" 
		active-text-color="#ffd04b"
		:router="true"
	>
		<el-submenu v-for="m in this.menu" :key="m.id" :index="m.frontUrl">
			<template slot="title">
				<i :class="m.icon"></i>
				<span>{{m.name}}</span>
			</template>
			<el-menu-item v-for="child in m.children" :key="child.id" :index="child.frontUrl">
				<i :class="child.icon"></i>
				<span>{{child.name}}</span>
			</el-menu-item>
		</el-submenu>
	</el-menu>
</template>

<script>
	export default {
		name: 'LmMenu',
		data() {
			return {
				menu: []
			}
		},
		created() {
			this.menu = this.$store.getters.GET_MENU
		}
	}
</script>

<style lang="less" scoped>
	.lm_menu {
		height: 100%;
		li {
			overflow: hidden;
		}
	}
</style>
